/**
 * AdminLte 的外框样式封装
 *
 * props:
 * @hidden 彻底隐藏外框，为了某些页面复用，容易内嵌
 * @header 头部标题,如果为空,则不带头部样式
 * @headerBtns 头部右边的工具栏按钮, 直接传入标签组件
 *
 * ex:
 *
 * <Frame header="标题" headerBtns={[<HeaderBtn onClick={}></HeaderBtn><HeaderBtn></HeaderBtn>]}>
 * </Frame>
 */

class Frame extends React.Component{

    getHeaderBtns(){

        return (
            <div className="box-tools pull-right" >
                {
                    this.props.headerBtns
                }
            </div>
        )

    }

    render(){
        if(this.props.hidden){
            return(
                <div>
                    {this.props.children}
                </div>
            )
        }
        else if(this.props.header) {
            return (
                <div className="box box-primary">
                    <div className="box-frame-with-header">
                        <div className="box-header with-border">
                            <h3 className="box-title">{this.props.header}&nbsp;{this.props.tips?<Tips time={300000}>{this.props.tips}</Tips>:''}</h3>
                            {
                                this.props.headerBtns?this.getHeaderBtns():''
                            }
                        </div>
                        <div className={"box-body "+this.props.className}>
                            {this.props.children}
                        </div>
                    </div>
                </div>
            )
        }else{
            return (
                <div className="box box-primary">
                    <div className="box-frame-with-header">
                        <div className="box-body">
                            <div className={this.props.className}>
                                {this.props.children}
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    }
}

class HeaderBtn extends React.Component{

    render(){
        return (
            <button type="button" className="btn btn-box-tool" {...this.props} style={{fontSize:14}}>{this.props.children}</button>
        )
    }
}